<template>
	<view class="index">
		<musicHead title="网易云音乐" :icon="false"/>
		<view class="container">
			<scroll-view scroll-y="true" >
				<view class="indexSearch">
					<text class="iconfont iconsearch"/>
					<input type="text" placeholder="搜索歌曲" @tap="handleSearch">
				</view>
				<view class="indexList">
					<view class="indexListItem" v-for="i in topList" :key="i.userId" @tap="handleToList(i.id)">
						<view class="indexListImg">
							<image :src="i.coverImgUrl" mode=""></image>
							<text>{{i.updateFrequency}}</text>
						</view>
						<view class="indexListText">
							<view  v-for="(j,index) in i.tracks" :key="index">
								{{index+1}}. {{j.first}}---{{j.second}}
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script setup lang="ts">
import {ref} from 'vue'
import {onLoad,onShow,onPullDownRefresh,onReachBottom} from '@dcloudio/uni-app'
import musicHead from '@/components/musicHead/musicHead.vue'
import {login,getTopList} from '../../services/api'
import {topListItem,topListResult } from '../../services/interface'

const topList = ref<topListItem[]>([])
const handleToList = (id:number) =>{
		uni.navigateTo({
			url:`/pages/list/list?listId=${id}` 
		})
}
const handleSearch = () => {
	uni.navigateTo({
		url:'/pages/search/search'
	})
}

onLoad(()=>{
	login()
	getTopList().then((res:topListResult)=>{
		topList.value = res.data.list
		topList.value.length = 4
	})
})
onShow(()=>{
	 
})
onPullDownRefresh(()=>{
	
})
onReachBottom(()=>{
	
})
</script>

<style scoped lang="scss">
.index{
	.indexSearch{
		display: flex;
		align-items: center;
		height: 70rpx;
		margin: 70rpx 30rpx 30rpx 30rpx;
		background-color: #f7f7f7;
		border-radius: 50rpx;
		text{
			font-size: 26rpx;
			margin-right: 26rpx;
			margin-left: 26rpx;
		}
		input{
			font-size: 28rpx;
			flex: 1;
		}
	}
	.indexList{
		margin: 0 30rpx;
		.indexListItem{
			display: flex;
			margin-bottom: 34rpx;
		}
		.indexListImg{
			position: relative;
			width: 212rpx;
			height: 212rpx;
			border-radius: 30rpx;
			overflow: hidden;
			image{
				width: 100%;
				height: 100%;
			}
			text{
				position: absolute;
				left: 12rpx;
				bottom: 16rpx;
				color: white;
				font-size: 20rpx;
			}
		}
		.indexListText{
			font-size: 24rpx;
			line-height: 60rpx;
			margin-left: 24rpx; 
			width: 402rpx;
			overflow: hidden !important;
			white-space: nowrap;
			text-overflow: ellipsis;
		}
	}
}
</style>
